// 基础功能组件
import Plugin from '@ckeditor/ckeditor5-core/src/plugin'
// 按钮视图组件
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'

import store from '@/store/index';
import './styles.css'

// 按钮的图标 SVG
const fullscreenIcon = `<svg t="1638932517620" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2323" width="200" height="200"><path d="M368.896 192H224a32 32 0 0 0-32 32v137.888a32 32 0 0 0 64 0V256h112.896a32 32 0 0 0 0-64zM784.864 192H640a32 32 0 1 0 0 64h112.864v105.888a32 32 0 1 0 64 0V224a32 32 0 0 0-32-32zM368.896 777.92H256V672a32 32 0 1 0-64 0v137.92a32 32 0 0 0 32 32h144.896a32 32 0 1 0 0-64zM784.864 640a32 32 0 0 0-32 32v105.92H640a32 32 0 1 0 0 64h144.864a32 32 0 0 0 32-32V672a32 32 0 0 0-32-32z" p-id="2324" fill="#333333"></path><path d="M912 48h-800c-35.296 0-64 28.704-64 64v800c0 35.296 28.704 64 64 64h800c35.296 0 64-28.704 64-64v-800c0-35.296-28.704-64-64-64z m-800 864v-800h800l0.064 800H112z" p-id="2325"></path></svg>
`
const fullscreenCancel=`<svg t="1638942846926" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2585" width="200" height="200"><path d="M354.133333 682.666667H256v-42.666667h170.666667v170.666667H384v-98.133334L243.2 853.333333l-29.866667-29.866666L354.133333 682.666667z m358.4 0l140.8 140.8-29.866666 29.866666-140.8-140.8V810.666667h-42.666667v-170.666667h170.666667v42.666667h-98.133334zM354.133333 384L213.333333 243.2l29.866667-29.866667L384 354.133333V256h42.666667v170.666667H256V384h98.133333z m358.4 0H810.666667v42.666667h-170.666667V256h42.666667v98.133333L823.466667 213.333333l29.866666 29.866667L712.533333 384z" p-id="2586"></path></svg>`
// 自定义组件需要继承基础组件
class Fullscreen extends Plugin {
    // 重写基础组件的初始化函数
    init () {
        // 获取当前编辑器
        const editor = this.editor
        // 从当前编辑器的配置中获取传入的自定义配置名称
        const fullscreen = this.editor.config.get('fullscreen')

        // 将自定义按钮添加到当前编辑器的组件工厂
        editor.ui.componentFactory.add('fullscreen', locale => {
            // 获取当前编辑器的按钮视图
            const view = new ButtonView(locale)
            let etat=0
            // 在按钮视图中注入自定义按钮的名称、图标
            view.set({
                label: '全屏',
                icon: fullscreenIcon,
                // 开启提示，当鼠标悬浮到按钮上，会显示 label 指定的 fullscreen 字样
                tooltip: true
            })

            // 点击按钮
            view.on('execute', () => {
                store.state.ckeditor = editor
                if(etat==1){
                    editor.sourceElement.nextElementSibling.removeAttribute('id')
                    document.body.removeAttribute('id')
                    view.set({
                        label: '全屏',
                        icon: fullscreenIcon,
                        // 开启提示，当鼠标悬浮到按钮上，会显示 label 指定的 fullscreen 字样
                        tooltip: true
                    })
                    etat=0
                }else{
                    editor.sourceElement.nextElementSibling.setAttribute('id','fullscreeneditor')
                    document.body.setAttribute('id','fullscreenoverlay')
                    view.set({
                        label: '默认',
                        icon: fullscreenCancel,
                        // 开启提示，当鼠标悬浮到按钮上，会显示 label 指定的 fullscreen 字样
                        tooltip: true
                    })
                    etat=1
                }
                // 执行自定义配置中指定的回调函数
                fullscreen.handler.call()
            })

            // 返回修改后的视图内容
            return view
        })
    }
}

// 对外暴漏自定义组件
export default Fullscreen
